<template>
    <div class="RoleSet">
        <el-dialog :title="roleDetailId?$t('updateRole.edit_role'):$t('updateRole.new_role')" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)" :showUpdate="showUpdate">
            <el-form class="small-space" ref="adjustTypeFrom" label-position="right" label-width="120px">
                <dialog-wrapper>
                    <el-form-item :label="$t('updateRole.role_id')">
                        <el-input v-if="roleDetailId" v-model="roleInfo.id" readonly></el-input>
                        <el-input v-else v-model="roleInfo.id" :placeholder="$t('updateRole.generated')" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('updateRole.role_name')">
                        <el-input v-model="roleInfo.rolename" :placeholder="$t('updateRole.please_enter')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('updateRole.status')">
                        <el-select v-model.number="roleInfo.enabled" :placeholder="$t('updateRole.please_choose')">
                            <el-option v-for="(statu, index) of roleStatusArray" :key="index" :label="statu " :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="关联平台">
                        <el-input v-model="roleInfo.mch_ids" placeholder="请输入 ..."></el-input>
                    </el-form-item> -->
                    <el-form-item :label="$t('updateRole.permission_list')" v-if="$store.state.user.perm.includes(212)">
                        <el-tree ref="permTree" :data="permTree" check-change="test" show-checkbox node-key="id"
                                :default-checked-keys="permissions" :props="defaultProps">
                        </el-tree>
                    </el-form-item>
                </dialog-wrapper>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('update:showUpdate', false)">{{$t('updateRole.cancel')}}</el-button>
                <el-button v-if="roleDetailId" type="primary" :loading="loading" @click="updateRoleInfo">{{$t('updateRole.ok')}}</el-button>
                <el-button v-else type="primary" :loading="loading" @click="createRoleInfo">{{$t('updateRole.ok')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import DialogWrapper from '@/components/DialogWrapper';
import {
    getRoleDetail,
    saveRoleInfo,
    createRole
} from '@/api/role';

export default {
    components: { DialogWrapper },
    data() {
        return {
            showDialog: this.showUpdate,
            loading: false,
            roleInfo: {},
            loadNode: false,
            defaultProps: {
                children: 'permissions',
                label: 'name'
            }
        };
    },
    props: {
        showUpdate: {
            type: Boolean,
            default: false
        },
        roleDetailId: {
            type: Number
        },
        permTree: {
            type: Array
        },
        permissions: {
            type: Array
        }
    },
    created() {
    },
    mounted() {
        if (this.roleDetailId) {
            this.getRoleDetail();
        }
    },
    computed: {
      roleStatusArray: function() {
        return [this.$t('updateRole.disable'), this.$t('updateRole.enable')]
      }
    },
    methods: {
        createRoleInfo() {
            let CheckedKeys = this.$refs.permTree.getCheckedKeys();
            let CheckedKey = [];
            CheckedKeys.map(item => {
                if (!CheckedKey.includes(item)) {
                    CheckedKey.push(item);
                }
            });
            this.roleInfo.permissions = CheckedKey;
            if (this.validData()) {
                createRole(this.roleInfo).then(res => {
                    if (res.status === 0) {
                        this.$message({
                            message: this.$t('updateRole.added_successfully'),
                            type: 'success'
                        });
                        this.$emit('update:showUpdate', false);
                    }
                })
                .catch( () => {
                    this.$message({ message: this.$t('updateRole.role_exist'), type: 'error' });
                });
            }
        },
        updateRoleInfo() {
            if (this.validData()) {
                let CheckedKeys = this.$refs.permTree.getCheckedKeys();
                let CheckedKey = [];
                CheckedKeys.map(item => {
                if (!CheckedKey.includes(item)) {
                        CheckedKey.push(item);
                    }
                });
                this.roleInfo.permissions = CheckedKey;
                saveRoleInfo(this.roleInfo, this.roleDetailId).then(res => {
                    if (res.status === 0) {
                        this.$message({ message: this.$t('updateRole.updated_successfully'), type: 'success' });
                        this.$emit('update:showUpdate', false);
                    }
                })
                .catch( () => {
                    this.$message({ message: this.$t('updateRole.role_exist'), type: 'error' });
                });
            }
        },
        getRoleDetail() {
            getRoleDetail(this.roleDetailId).then(res => {
                if (res.status === 0) {
                    this.roleInfo = res.data;
                }
            });
        },
        validData() {
            if (this.roleInfo) {
                if (!this.roleInfo.rolename) {
                    this.$message({ message: this.$t('updateRole.enter_role_name'), type: 'error' });
                    return false;
                } else if (this.roleInfo.rolename.trim() === '') {
                    this.$message({ message: this.$t('updateRole.enter_role_name'), type: 'error' });
                    return false;
                } else if(this.roleInfo.enabled === undefined) {
                  this.$message({ message: this.$t('updateRole.select_status'), type: 'error' });
                  return false
                } else {
                    return true;
                }
            } else {
                this.$message({ message: this.$t('updateRole.enter_role_name'), type: 'error' });
            }
        }
    },
    watch: {
        showUpdate() {
            this.showDialog = this.showUpdate;
        }
    }
};

export const enUpdateRole = {
    edit_role: 'Edit Role',
    new_role: 'Add Role',
    role_id: 'Role ID',
    role_name: 'Role Name',
    generated: 'Automatic Generated',
    please_enter: 'Please enter...',
    status: 'Status',
    please_choose: 'Please choose',
    ok: 'OK',
    cancel: 'Cancel',
    enable: 'Enable',
    disable: 'Disable',
    permission_list: 'Permission List',
    enter_role_name: 'Please enter a role name',
    select_status: 'Please select a status',
    added_successfully: 'Added Successfully',
    updated_successfully: 'Updated Successfully',
    role_exist: 'Role Already Exist'
}

export const zhUpdateRole = {
    edit_role: '修改角色',
    new_role: '新增角色',
    role_id: '角色ID',
    role_name: '角色名称',
    generated: '自动生成',
    please_enter: '请输入 ...',
    status: '状态',
    please_choose: '请选择 ...',
    ok: '确 定',
    cancel: '取 消',
    enable: '可用',
    disable: '禁用',
    permission_list: '许可清单',
    enter_role_name: '请输入角色名称',
    select_status: '请选择状态',
    added_successfully: '新增成功。',
    updated_successfully: '编辑成功了。',
    role_exist: '角色已经存在'
}

</script>
